<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="element-ui/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row :gutter="12">
                <el-col :span="6" offset="3">
                    <el-card shadow="never">
                        <div slot="header"><span>文件列表</span></div>
                        <div v-for=" item in fileList" :key="item.name">
                            <span>{{item.name}}</span>
                            <el-button size="small" type="primary" @click="download(item.name)">下载</el-button>
                            <el-button size="small" type="primary" @click="delete(item.name)">删除</el-button>
                        </div>
                    </el-card>
                    <el-upload
                            class="upload-demo"
                            show-file-list=false
                            action="api/manager/upload">
                        <span><i class="el-icon-upload"></i><el-button size="small" type="primary">点击上传</el-button></span>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="never">
                        不显示
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="vue/vue.js"></script>
<!-- import JavaScript -->
<script src="element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                fileList: [
                    {
                        name: "test1",
                        size: 2048,
                        createTime: "2021-03-12"
                    },
                    {
                        name: "test2",
                        size: 2048,
                        createTime: "2021-03-12"
                    },
                    {
                        name: "test3",
                        size: 2048,
                        createTime: "2021-03-12"
                    }
                ]
            }
        },
        methods: {
            delete: function (filename){
                this.$message(filename);
            },
            download: function (filename){

            }
        }
    })
</script>
<style>
</style>
</body>
</html>